<template>
	<view class="record">
		<view class="record_container">
			<view class="header">一周运动记录一览表</view>
			<view class="mains">
				<view class="main_title">
					<view>日期</view>
					<view>运动时长</view>
					<view>指脉氧饱 和(SpO2)</view>
					<view>最大心率</view>
					<view>其他</view>
				</view>
				<!-- <view class="view" v-for="item in 5" :key="item"> -->
					<view class="view" v-for="item in recordData" :key="item.id">
						<view>{{$filters.formatTime(item.createdTime)}}</view>
						<view>{{item.motionDuration}}</view>
						<view>{{item.spo2}}</view>
						<view>{{item.maximumHeart}}</view>
						<view>{{item.other}}</view>
					</view>
				<!-- </view> -->
			</view>
			<view class="base-operation-two operation">
				<view @click="handleBack">上一页</view>
				<view @click="handleNext">下一页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { motionRecord } from '../../service/api.js'
	export default {
		data() {
			return {
				recordData: [],
				currentNum: 1
			}
		},
		onLoad() {
			this.getMotionRecord();
		},
		methods: {
			getMotionRecord() {
				motionRecord(this.currentNum).then(res => {
					if(res.status === 200) {
						this.recordData = res.data.records;
						console.log(this.recordData)
					}
				})
			},
			handleBack() {
				if(this.currentNum >= 2) {
					this.currentNum -= 1;
					this.getMotionRecord();
				} else {
					uni.showToast({
						title: '已经是第一页了',
						duration: 1000,
						icon: "error"
					})
				}
			},
			handleNext() {
				this.currentNum += 1;
				this.getMotionRecord();
			}
		},
		
	}
</script>

<style scoped lang="scss">
.record {
	width: 100%;
	height: 100vh;
	.record_container {
		padding: 0 20px;
		.header{
			height: 60px;
			line-height: 60px;
			background-color: #F1F8F7;
			color: #2BC3A4;
			text-align: center;
			border-radius: $uni-border-radius-16;
			margin: 20px 0;
		}
		.mains {
			.main_title, .view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				view {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 2px;
					font-size: 14px;
					// overflow: hidden;
					// text-overflow: ellipsis;
					height: 50px;
					text-align: center;
					background-color: #2BC3A4;
					// border: 1px solid #fff;
				}
			}
			.view {
				// height: 300px;
				// background-color: pink;
				margin: 0 -2px;
				> view {
					background-color: #D3EDE8;
					color: #2BC3A4;
					overflow: hidden;
					text-overflow: ellipsis;
					// white-space: nowrap;
				}
			}
		}
		.operation {
			display: flex;
			view {
				flex: 1;
				background-color: #F2AF60;
				color: #fff;
			}
		}
	}
}
</style>
